/*
 * @Author: jiu yin
 * @Date: 2024-05-09 14:51:40
 * @LastEditTime: 2024-06-04 19:08:29
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\comment\PicoList\index.tsx
 * jiu
 */
import pico from "@/assets/image/pico.png";
import PicoStatus from "@/comment/PicoStatus";
import User_avatar from "@/comment/user_avatar";

import "./index.scss";
export default function list(props: any) {
	const { list = [], itemActive = () => {} } = props;

	return (
		<div>
			{list.length != 0 && (
				<ul className="mt-15px flex flex-wrap gap-20px">
					{list.map((item: any, index: number) => (
						<li
							className=" w-262px  cursor-pointer bg-#F7F8FF border-rd-10px box-border p-15px relative"
							key={index}
							onClick={() => itemActive(item)}>
							<div className="absolute left-0">
								<PicoStatus status={item.status}></PicoStatus>
							</div>
							<div className="pico flex justify-end items-center gap-10px font-700">
								<i className="i2"></i>
								<i className="i3"></i>
								{item.battery}%
							</div>
							<div className="flex flex-col items-center mt-20px">
								<img src={pico} alt="" className="w-88px h-88px" />
								<p className="c-#161940 font-700 mt-12px">{item.device_name}</p>
								<p className="mt-5px c-#5C5F7A text-14px">SN:{item.device_real_sn}</p>

								<div className="mt-24px">
									{item.host_status == 1 && (
										<div className="bg-#f0f1f9 border-rd-10px h-44px w-224px line-height-44px text-center c-#9697A9">
											归属: <span className="c-#161940">待托管</span>
										</div>
									)}
									{item.host_status == 2 && (
										<div className="bg-#f0f1f9 border-rd-10px h-44px w-224px line-height-44px text-center c-#9697A9">
											归属: <span className="c-#161940">自有</span>
										</div>
									)}
									{item.host_status == 3 && (
										<User_avatar
											options={{
												avatar_url: item.avatar_url,
												nickname: item.nickname,
												// sex: 1,
												id: item.user_id,
												color: "#A6A6A6",
											}}
										/>
									)}
								</div>
							</div>
						</li>
					))}
				</ul>
			)}
		</div>
	);
}
